<template>
  <div class="flBPlBoxImgBox">
    <span>测试</span>
    <a href="###" class="flBPlBoxImgItem" v-for="(v, k) in FLTabArr" :key="k + '品类'">
      <img class="flBPlBoxImgItemImg" :src="v.imgUrl" alt="" />
      <span class="flBPlBoxImgItemText">{{ v.text }}</span>
    </a>
  </div>
</template>

<script>
export default {
  mounted() {
    this.FLTabArr = this.props.arr;
    console.log(this.props.arr);
  },
  name: "FLTabClass",
  data() {
    return {
      FLTabArr: [],
    };
  },
  props: {
    arr: {
      type: Array,
    },
  },
};
</script>

<style scoped>
.flLitem {
  width: 1.79rem;
  height: 0.8rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  justify-self: center;
  align-items: center;
}
.flLitemText {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.3rem;
  color: #4d4d4d;
  text-align: center;
  text-decoration: none;
  border-right: 0.02rem solid #ffffff;
}
.flLitemTextOn {
  border-right: 0.02rem solid #e53e42;
  color: #e83d41;
}
</style>
